<div class="w-full lg:w-[400px] lg:max-w-[400px] flex flex-col">
  <form [formGroup]="formGroup"  class="flex flex-col gap-4">

    <!-- <pac-avatar-editor formControlName="avatar" class="w-48 h-48 self-center" /> -->
    <emoji-avatar formControlName="avatar" editable class="knowledgebase-avatar self-center shadow-md" />

    <ngm-input [label]=" 'PAC.KEY_WORDS.Name' | translate: {Default: 'Name'} " formControlName="name" />

    <div class="flex-1 min-w-full flex flex-col">
      <label class="ngm-input-label shrink-0">{{'PAC.KEY_WORDS.Description' | translate: {Default: 'Description'} }}</label>
      <textarea class="ngm-input-element" matInput formControlName="description"
        cdkTextareaAutosize
        cdkAutosizeMinRows="1"
        cdkAutosizeMaxRows="5">
      </textarea>
    </div>

    <ngm-select [label]=" 'PAC.KEY_WORDS.Language' | translate: {Default: 'Language'} " formControlName="language"
      valueKey="key"
      [selectOptions]="[
        {
          key: 'English',
          caption: 'English'
        },
        {
          key: 'Chinese',
          caption: 'Chinese'
        },
      ]"
    />
    <div class="flex-1 min-w-full flex flex-col">
      <label class="ngm-input-label shrink-0">{{'PAC.KEY_WORDS.Permission' | translate: {Default: 'Permission'} }}</label>
      <mat-radio-group formControlName="permission" aria-label="Select an permission">
        <mat-radio-button [value]="KnowledgebasePermission.Private">{{'PAC.Knowledgebase.Permission_Private' | translate: {Default:'Private'} }}</mat-radio-button>
        <mat-radio-button [value]="KnowledgebasePermission.Organization">{{'PAC.Knowledgebase.Permission_Organization' | translate: {Default:'Organization'} }}</mat-radio-button>
        <mat-radio-button [value]="KnowledgebasePermission.Public">{{'PAC.Knowledgebase.Permission_Public' | translate: {Default:'Public'} }}</mat-radio-button>
      </mat-radio-group>
    </div>

    <copilot-model-select class=""
      [modelType]="eModelType.TEXT_EMBEDDING"
      formControlName="copilotModel"
    />

    <!-- <ngm-select [label]=" 'PAC.KEY_WORDS.Copilot' | translate: {Default: 'Copilot'} " 
      formControlName="copilotId"
      valueKey="key"
      [displayBehaviour]="DisplayBehaviour.descriptionOnly"
      [selectOptions]="copilotOptions()"
    />

    <ngm-select [label]=" 'PAC.Knowledgebase.EmbeddingModel' | translate: {Default: 'Embedding Model'} " formControlName="embeddingModelId"
      valueKey="key"
      searchable
      allowInput
      [selectOptions]="models()"
    /> -->

    <div formGroupName="parserConfig">
      <ngm-input [label]=" 'PAC.Knowledgebase.EmbeddingBatchSize' | translate: {Default: 'Embedding Batch Size'} " formControlName="embeddingBatchSize" />
      <ngm-input [label]=" 'PAC.Knowledgebase.ChunkSize' | translate: {Default: 'Chunk Size'} " formControlName="chunkSize" />
      <ngm-input [label]=" 'PAC.Knowledgebase.ChunkOverlap' | translate: {Default: 'Chunk Overlap'} " formControlName="chunkOverlap" />
    </div>

    <ngm-slider-input [label]=" 'PAC.Knowledgebase.SimilarityThreshold' | translate: {Default: 'Similarity Threshold'}"
      formControlName="similarityThreshold"
      [min]="0" [max]="1" [step]="0.01">
      <span class="font-notoColorEmoji" [matTooltip]="'PAC.Knowledgebase.SimilarityThresholdInfo' | translate: {Default: 'If the similarity between the query and the chunk is less than this threshold, the chunk will be filtered out.'}"
        >💡</span>
    </ngm-slider-input>

    <div class="flex justify-end gap-2">
      <button mat-flat-button type="button" (click)="cancel()">
        {{ 'PAC.KEY_WORDS.Cancel' | translate: {Default: 'Cancel'} }}
      </button>
      <button mat-raised-button color="primary" [disabled]="loading() || formGroup.invalid || formGroup.pristine" (click)="save()">
        {{ 'PAC.KEY_WORDS.Save' | translate: {Default: 'Save'} }}
      </button>
    </div>
  </form>

</div>